import React, { Component } from "react";
import "../assets/css/AddressItem.css";
import {withRouter} from "react-router-dom"

class AddressItem extends Component {
  constructor(props) {
    super(props);

    this.state = {
      checked: false,
    };
    this.ToEdit = this.ToEdit.bind(this)
  }

  ToEdit(e){
    e.stopPropagation()
    this.props.history.push("/editAddress/" + this.props.item.aid)
  }

  componentWillMount() {
    if (this.props.check) {
      if (this.props.currentAddress.id === this.props.item.id) {
        this.setState({
          checked: true,
        });
      } else {
        this.setState({
          checked: false,
        });
      }
    }
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.check) {
      if (nextProps.currentAddress.id === this.props.item.id) {
        this.setState({
          checked: true,
        });
      } else {
        this.setState({
          checked: false,
        });
      }
    }
  }

  render() {
    return (
      <div
        className="AddressItem"
        onClick={()=>this.props.onClick(this.props.item)}
      >
        {this.props.check && (
          <div className="AddressItem_checkBox">
            {this.state.checked ? (
              <i className="checked_active"></i>
            ) : (
              <i className="checked_no"></i>
            )}
          </div>
        )}
        <div className="AddressItem_text">
          <div className="AddressItem_text_user">
            <span className="user_name">{this.props.item.name}</span>
            <span className="user_phone">{this.props.item.tel}</span>
            {this.props.item.isDefault ? (
              <span className="default">默认</span>
            ) : (
              ""
            )}
          </div>
          <div>
            <span>{this.props.item.province}</span>
            <span>{this.props.item.city}</span>
            <span>{this.props.item.county}</span>
            <span>{this.props.item.addressDetail}</span>
          </div>
        </div>
        {this.props.edit && <i className="address_edit" onClick={this.ToEdit}></i>}
      </div>
    );
  }
}

export default withRouter(AddressItem);
